<template>
  <el-container class="reply-edit" v-loading="loading">
    <el-main>
      <el-form :model="form.model" :rules="form.rules" ref="formRef" label-width="100px">
        <el-form-item v-if="form.model.group == 'keywords'" label="关键字" prop="keywords">
          <div class="keys-wrap">
            <el-input
              v-model="keywords"
              placeholder="请输入关键字、空格确认"
              @keyup.space="addKeywords(keywords)"
            ></el-input>
            <div class="sa-flex">
              <el-tag
                v-for="(tag,index) in form.model.keywords"
                :key="tag"
                closable
                :disable-transitions="false"
                @close="deleteKeywords(index)"
                >{{ tag }}</el-tag
              >
            </div>
          </div>
        </el-form-item>
        <el-form-item label="类型" prop="type" required>
          <el-radio-group v-model="form.model.type" @change="onChangeType">
            <el-radio label="news">图文消息</el-radio>
            <el-radio label="image">图片</el-radio>
            <el-radio label="video">视频</el-radio>
            <el-radio label="voice">语音</el-radio>
            <el-radio label="text">文本</el-radio>
            <el-radio label="link">链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="回复内容" prop="content">
          <el-select popper-class="material-select" v-model="form.model.content">
            <el-option
              v-for="item in contentOptions.data"
              :key="item.media_id"
              :label="item.title"
              :value="item.media_id + ''"
            >
              <div class="sa-flex">
                <sa-image
                  v-if="
                    item.type == 'news' ||
                    item.type == 'image' ||
                    item.type == 'video' ||
                    item.type == 'link'
                  "
                  :url="item.thumb_url"
                  size="30"
                ></sa-image>
                <div class="title sa-m-l-12 sa-line-1">
                  {{ item.title }}
                </div>
                <div class="media_id sa-line-1">
                  {{ item.media_id }}
                </div>
              </div>
            </el-option>
            <div class="material-select-pagination sa-flex">
              <el-pagination
                @size-change="changeSize($event, form.model.type)"
                @current-change="changeCurrent($event, form.model.type)"
                v-model:currentPage="contentOptions.page"
                :page-sizes="[10, 20]"
                :page-size="contentOptions.list_rows"
                layout="total, sizes, prev, pager, next, jumper"
                :total="contentOptions.total"
                :pager-count="5"
              ></el-pagination>
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status" required>
          <el-radio-group v-model="form.model.status">
            <el-radio label="enable">启用</el-radio>
            <el-radio label="disabled">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button
        v-if="modal.params.type == 'add'"
        v-auth="'wechat.admin.reply.add'"
        type="primary"
        @click="confirm"
        >保存</el-button
      >
      <el-button
        v-if="modal.params.type == 'edit'"
        v-auth="'wechat.admin.reply.edit'"
        type="primary"
        @click="confirm"
        >更新</el-button
      >
    </el-footer>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive, ref, unref } from 'vue';
  import wechat from '@/app/wechat/api';
  import { ElMessage } from 'element-plus';
  import materialSelect from '../material/select.js';
  import { cloneDeep } from 'lodash';

  const { contentOptions, getMaterialSelect, changeSize, changeCurrent } = materialSelect();

  const props = defineProps({
    modal: {
      type: Object,
    },
  });
  const emit = defineEmits(['modalCallBack']);

  // 添加 编辑 form
  let formRef = ref(null);
  const form = reactive({
    model: {
      keywords: [],
      group: props.modal.params.group,
      type: 'news',
      content: '',
      status: 'enable',
    },
    rules: {
      keywords: [{ required: true, message: '请输入关键字', trigger: 'blur' }],
      content: [
        {
          required: true,
          message: '请选择回复内容',
          trigger: 'blur',
        },
      ],
    },
  });
  const loading = ref(false);
  // 获取详情
  async function getDetail(id) {
    loading.value = true;
    const { error, data } = await wechat.admin.reply.detail(id);
    if (error === 0) {
      form.model = data;
      getMaterialSelect(form.model.type);
    }
    loading.value = false;
  }

  // 添加关键字
  const keywords = ref('');
  function addKeywords(val) {
    if (val.trim()) {
      if (form.model.keywords.indexOf(val.trim()) == -1) {
        form.model.keywords.push(val.trim());
        keywords.value = '';
      } else {
        ElMessage({
          message: '已存在不可再次添加.',
          type: 'warning',
        });
      }
    } else {
      ElMessage({
        message: '请输入关键字.',
        type: 'warning',
      });
    }
  }
  function deleteKeywords(index) {
    form.model.keywords.splice(index, 1);
  }

  function onChangeType() {
    form.model.content = '';
    getMaterialSelect(form.model.type);
  }

  // 表单关闭时提交
  function confirm() {
    // 表单验证
    unref(formRef).validate(async (valid) => {
      if (!valid) return;
      let submitForm = cloneDeep(form.model);
      const { error } =
        props.modal.params.type == 'add'
          ? await wechat.admin.reply.add(submitForm)
          : await wechat.admin.reply.edit(props.modal.params.id, submitForm);
      if (error == 0) {
        emit('modalCallBack', { event: 'confirm' });
      }
    });
  }

  onMounted(() => {
    if (props.modal.params.id) {
      getDetail(props.modal.params.id);
    } else {
      getMaterialSelect(form.model.type);
    }
  });
</script>
<style lang="scss" scoped>
  .reply-edit {
    .keys-wrap {
      width: 100%;
    }
    .el-tag {
      margin: 12px 12px 0 0;
    }
  }
  .material-select {
    position: relative;
    .title {
      width: 100px;
      flex-shrink: 0;
    }
    .media_id {
      flex: 1;
    }
    .material-select-pagination {
      position: sticky;
      height: 32px;
      top: 0;
      z-index: 1;
      justify-content: flex-end;
    }
  }
</style>
